
<template>
    <div>
    <div style="background-color: white;overflow-y: scroll;padding-bottom: 100px">
        <div class="mui-flex" v-for="(item,index) in liebiaoinitialAr" style=" height: 90px;
        border-bottom: 1px solid #e1e1e1;">
            <div class="cell3">
                <p class="voucher-title" >{{item.name}}</p>
                <p class="voucher-description" >{{item.specName}}</p>
            </div>
            <div class="cell">
                <div class="number"></div>
                <OfficeSpiner :index="index" max="500" min="0" unit="1" :amounts=item.amounts  @getspinnernumer="getselectspinnernumer"  width="80px" height="30px" >{{item.amounts}}</OfficeSpiner>

            </div>
        </div>
    </div>
        <div class="belowoselect-big">
            <p @click="combuttonClick" style="height: 100%;color: white;padding-top:0.3rem ;font-size: 0.3rem">确定</p>
            <!--<yd-button size="large" type="primary"@click.native="combuttonClick" style="background-color:#e9b778;color:white">确定</yd-button>-->
        </div>
    </div>
</template>
<script>
    import OfficeSpiner from "@/components/officeSpiner.vue";
    import {userInfoData} from '../../globalVariables'

    export default {
        name: "officeSelect",

        data() {
            return {

                liebiaoinitialAr:JSON.parse(localStorage.getItem('officedata')),

            }
        },

        components: {
            OfficeSpiner
        },
        created() {


        },
        methods:
            {
                getselectspinnernumer(data)
                {
                    // console.log(data);
                    var newAr=[];
                    newAr=JSON.parse(localStorage.getItem('officedata'));
                    var dic={};
                    dic=newAr[data.index];
                    dic['amounts']=data.amounts;
                    //新数据替换旧数据 把选择的数据替换列表的数据
                    newAr.splice(data.index,1,dic);
                    localStorage.setItem('officedata',JSON.stringify
                    (newAr));

                },
                combuttonClick()
                {
                    var selectAr=JSON.parse(localStorage.getItem('officedata'));
                    var newAr=[];
                    for (var i=0;i<selectAr.length;i++)
                    {
                        if (selectAr[i].amounts===0)
                        {

                        }else
                        {
                            newAr.push(selectAr[i]);
                        }
                    }
                    if (newAr.length===0)
                    {
                        this.$dialog.toast({
                            mes: '所选商品数量为空！',
                            timeout: 1500
                        });
                    }else
                    {
                        localStorage.setItem('room',JSON.stringify(''));
                        localStorage.setItem('phone',JSON.stringify(JSON.parse(localStorage.getItem(userInfoData)).mobile));
                        localStorage.setItem('address',JSON.stringify
                        (JSON.parse(localStorage.getItem(userInfoData)).addr));
                        localStorage.setItem('officedata',JSON.stringify(newAr));
                        this.$router.replace({name: 'officeShowinfoandremark'});

                    }
                }


            }

    }
</script>
<style scoped>

    .voucher-title {
        color: #464646;
        font-size: 0.3rem;
        text-align: left;
        padding-left: 20px;
        padding-top: 15px;
        width: 100%;
    }

    .voucher-description {
        color: #b1b1b1;
        font-size: 0.25rem;
        text-align: left;
        padding-left: 20px;
        width: 100%;
        padding-top: 10px;

    }
    .number {
        padding-right: 20px;
        padding-top: 20px;
    }
    .belowoselect-big
    {
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #e9b778;
        height: 1rem;
    }



</style>